<template>
  <div class=" cjy-outer">
    <header style="position: absolute;z-index: 10; overflow: visible">
      <headers title="超值促销"
               :hasTitle="true"
               :hasList="true"
               :hasCart="true"
               style="position: relative;z-index: 101"
               textAlign="center">

      </headers>
      <tab-head v-if="titleInfor.length > 4" :titleInfor="titleInfor" :pullDownMemu="true" pullDownTitle="套餐活动">

      </tab-head>

      <tab-head-order v-if="titleInfor.length <=4 && titleInfor.length>0 " :titleInfor="titleInfor"
                      :pullDownMemu="true">

      </tab-head-order>
    </header>

    <article style="width:100% ;height:100%; overflow: hidden;"
             v-if="regularInfo.length >0">
      <translate-test ref="verticalScroll" :lengths="titleInfor.length">
        <first-classification @refresh="refresh"
                              v-for="(item,index) in regularInfo"
                              :regularInfo="item"
                              v-if="index == activeIndex"
                              style="min-height: 19rem;padding-top: 2.2rem">
        </first-classification>
      </translate-test>
    </article>

    <div v-else class="no_data" style="padding: 5rem 0;">
      <img src="static/image/no_data.png">
      <p>暂无相关数据</p>
    </div>
    <add-cart-animate></add-cart-animate>
  </div>
</template>

<script>
  import Headers from '@/real-containers/header'
  import TabHead from '@/real-components/TabHead'
  import TabHeadOrder from '@/real-components/TabHeadOrder'
  import TranslateTest from '@/real-components/TranslateTest'
  import FirstClassification from './FirstClassification'
  import {queryRegularDetail} from '@/utils/ReturnAxios'
  import {Toast} from '@/utils/toast'
  import AddCartAnimate from '@/real-components/AddCartAnimate'

  export default {
    data () {
      return {
        titleInfor: [],

        regularInfo: [],

        showList: null,

        regularId: ''
      }
    },
    components: {
      Headers,
      TabHead,
      TabHeadOrder,
      TranslateTest,
      FirstClassification,
      AddCartAnimate
    },
    created () {
      var activeIndex = this.$route.query.activeIndex || 0
      this.regularId = this.$route.query.regularId || ''
      this.$store.dispatch('cjy/changeClassifyIndex', activeIndex)
      this.queryRegularDetail()
    },
    methods: {
      async queryRegularDetail () {
        var res
        try {
          res = await queryRegularDetail()
          res = res.data
        }
        catch (erro) {
        }

        if (res.returncode == 0) {
          Toast({
            message: res.msg,
            type: 'fail'
          })
        } else {
          this.regularInfo = res.data

          if (this.regularId) {
            var index = this.regularInfo.findIndex((item) => {
              return item.regularId == this.regularId
            })

            if (index != -1) {
              this.$store.dispatch('cjy/changeClassifyIndex', index)
            }
          }
        }
      },
      refresh () {
        this.$refs.verticalScroll && this.$refs.verticalScroll.refresh()
      }
    },
    watch: {
      regularInfo (data) {
        if (data.length <= 0) {
          return
        }
        this.titleInfor = data.map((item) => {
          return {
            oodsClassId: item.regularCode || '',
            goodsClassName: item.activityName || ''
          }
        })
        this.showList = data[this.activeIndex]
      },
      activeIndex (data) {
        this.$router.replace({path: 'regularmeal', query: {activeIndex: data}})
      }
    },
    computed: {
      activeIndex () {
        return this.$store.state.cjy.classifyIndex
      }

    }
  }
</script>

<style scoped>
  header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .cjy-outer {
    padding-top: 3rem;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
</style>
